<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
		<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
		<title>自定义的弹窗</title>
		<link rel="stylesheet" type="text/css" href="../css/api.css"/>
		<style>
			html, body {
				height: 100%;
				background: transparent;
				/*background: rgba(0,0,0,0.5);*/
			}
			#content {
				background: transparent;
				display: -webkit-box;
				-webkit-box-pack: center;
				-webkit-box-align: center;
				height: 100%;
				padding: 0 49px;
			}
			#content.center {
				-webkit-box-align: center;
			}
			#content.bottom {
				-webkit-box-align: end;
				padding: 0;
			}
			#pop-container {
				background-color: #fff;
				border-radius: 5px;
				-webkit-box-flex: 1;
			}
			#pop-container.bottom {
				border-radius: 0;
			}
			#pop-container #pop-list {
				padding: 0 15px;
			}
			#pop-container #pop-list > li {
				padding: 13px 0;
				text-align: center;
				color: #101010;
				font-size: 15px;
				border-bottom: #e6e6e6 1px solid;
			}
			#pop-container #pop-list > li:active{
				background-color:#f8f8f8;
			}
			#pop-container .pop-title {
			}
		</style>
	</head>
	<body>
		<div id="content" onclick="api.closeFrame()">
			<div id="pop-container">
				<div id="pop-list-item-temp" style="display: none;">
					<div class="pop-title"></div>
				</div>
				<ul id="pop-list"></ul>
			</div>
		</div>
	</body>
	<script type="text/javascript" src="../script/api.js"></script>
	<script type="text/javascript" src="../script/jquery-3.2.1.min.js"></script>
	<script type="text/javascript">
		var mListView;
		var mPopDatas;
		var mPopType = 'center';
		apiready = function() {
			initData();
			initView();
			showPopList(mPopDatas);
		};
		function initData() {
			//datas=[{title:'t1'},{title:'t2'}]
			mPopDatas = api.pageParam.datas;
			mPopType = api.pageParam.type;
		}

		function initView() {
			mListView = $('#pop-list');
			var content = $('#content');
			showPopType(content, mPopType)
		}

		/**
		 * 展示弹窗的模式：居中==center、在底部 ==bottom
		 * @param{String} type - 传入模式数据
		 */
		function showPopType(rootView, type) {
			switch(type) {
				case 'center':
					rootView.addClass('center');
					break;
				case 'bottom':
					rootView.addClass('bottom');
					$('#pop-container').addClass('bottom');
					break;
				default:
					rootView.addClass('center');
			}
		}

		/**
		 * 展示弹窗的list
		 * @param{Array} datas - 需要展示的数据的数组
		 */
		function showPopList(datas) {
			if (datas == null) {
				throw new Error('popView接收的数据不能为空');
				return;
			}
			var dl = datas.length;
			var i = 0;
			var item;
			var itemHtml = $('#pop-list-item-temp').html();
			for (; i < dl; i++) {
				item = createLVItem(datas[i], itemHtml);
				mListView.append(item);
			}
		}

		/**
		 * 创建弹窗的list的item
		 * @param{Array} data - 需要展示的数据对象
		 * @param{Array} itemHtml - 需要展示的数据的数组
		 */
		function createLVItem(data, itemHtml) {
			var li = document.createElement('li');
			li.innerHTML = itemHtml;
			var title = li.getElementsByClassName('pop-title')[0];
			title.innerText = data.title;
			li.onclick = function() {
				var lis = mListView.children('li');
				var ll = lis.length;
				var i = 0;
				for (; i < ll; i++) {
					if (this == lis[i]) {
						triggerPopItemClickListener(i);
						break;
					}
				}
			}
			return li;
		}

		/**
		 * 触发pop item点击事件，发送点击的index到监听。
		 * @param{Number} index - pop的item的下标
		 */
		function triggerPopItemClickListener(index) {
			api.sendEvent({
				name : 'PopItemClickListener',
				extra : {
					'index' : index
				}
			});
		}
	</script>
</html>
